<template>
  <el-dialog
    :title="dialogTitle"
    :visible.sync="visible"
    width="900px"
    @close="handleClose"
    class="community-dialog"
    :close-on-click-modal="false"
  >
    <!-- 统计信息卡片 -->
    <div class="stats-card">
      <div class="stats-item">
        <i class="el-icon-s-home stats-icon"></i>
        <div class="stats-content">
          <div class="stats-number">{{ communityList.length }}</div>
          <div class="stats-label">{{ getStatsLabel() }}</div>
        </div>
      </div>
      <div class="stats-item" v-if="currentType !== 'unstarted'">
        <i class="el-icon-time stats-icon"></i>
        <div class="stats-content">
          <div class="stats-number">{{ getTimeRangeText() }}</div>
          <div class="stats-label">时间范围</div>
        </div>
      </div>
    </div>

    <!-- 美化后的列表 -->
    <div class="community-list-container">
      <div v-if="communityList.length === 0" class="empty-state">
        <i class="el-icon-box empty-icon"></i>
        <p class="empty-text">暂无数据</p>
      </div>
      <div v-else class="community-grid">
        <div 
          v-for="(item, index) in communityList" 
          :key="index" 
          class="community-card"
          :class="getCardClass()"
        >
          <div class="card-header">
            <div class="community-name">
              <i :class="getStatusIcon()" class="status-icon"></i>
              <span class="name-text">{{ currentType === 'unstarted' ? item.deptName : item.communityName }}</span>
            </div>
            <div class="status-badge" :class="getStatusClass()">
              {{ getStatusText() }}
            </div>
          </div>
          
          <div v-if="showTime" class="card-content">
              <div class="business-info" v-if="item.businessDepartment">
                <i class="el-icon-office-building business-icon"></i>
                <span class="business-label">营业部：</span>
                <span class="business-value">{{ item.businessDepartment }}</span>
              </div>
            <div class="time-info">
              <div class="time-item">
                <i class="el-icon-video-play time-icon"></i>
                <span class="time-label">开展时间：</span>
                <span class="time-value">{{ formatTime(item, null, item.activityStartTime) }}</span>
              </div>
              <div class="time-item">
                <i class="el-icon-video-pause time-icon"></i>
                <span class="time-label">结束时间：</span>
                <span class="time-value">{{ formatTime(item, null, item.activityEndTime) }}</span>
              </div>
            </div>
          </div>
          
          <div v-else class="card-content">
            <div class="unstarted-info">
              <i class="el-icon-warning-outline"></i>
              <span>待开展活动</span>
            </div>
          </div>
        </div>
      </div>
    </div>
    
    <div slot="footer" class="dialog-footer">
      <el-button @click="handleClose" size="medium">
        <i class="el-icon-close"></i>
        关 闭
      </el-button>
    </div>
  </el-dialog>
</template>

<script>
import { listByStatus, getUnstartedCommunities } from "@/api/system/target";
import { parseTime } from "@/utils/ruoyi";

export default {
  name: "CommunityListDialog",
  data() {
    return {
      visible: false,
      dialogTitle: "",
      communityList: [],
      showTime: false,
      currentType: ""
    };
  },
  methods: {
    // 显示弹窗
    show(type, title) {
      this.visible = true;
      this.dialogTitle = title;
      this.currentType = type;
      this.showTime = type !== "unstarted"; // 未开展不显示时间
      this.loadCommunityList(type);
    },
    
    // 获取统计标签
    getStatsLabel() {
      const labels = {
        'completed': '已完成小区',
        'planned': '计划开展小区',
        'unstarted': '未开展小区'
      };
      return labels[this.currentType] || '小区总数';
    },
    
    // 获取时间范围文本
    getTimeRangeText() {
      if (!this.communityList.length) return '-';
      
      // 收集所有开始时间和结束时间
      const startTimes = this.communityList
        .map(item => item.activityStartTime)
        .filter(date => date)
        .sort();
      
      const endTimes = this.communityList
        .map(item => item.activityEndTime)
        .filter(date => date)
        .sort();
      
      if (startTimes.length === 0 && endTimes.length === 0) return '-';
      
      // 获取最早的开始时间和最晚的结束时间
      const earliestStart = startTimes.length > 0 ? startTimes[0] : null;
      const latestEnd = endTimes.length > 0 ? endTimes[endTimes.length - 1] : null;
      
      if (earliestStart && latestEnd) {
        const startText = this.formatTime(null, null, earliestStart);
        const endText = this.formatTime(null, null, latestEnd);
        return startText === endText ? startText : `${startText} ~ ${endText}`;
      } else if (earliestStart) {
        return `${this.formatTime(null, null, earliestStart)} 开始`;
      } else if (latestEnd) {
        return `截止 ${this.formatTime(null, null, latestEnd)}`;
      }
      
      return '-';
    },
    
    // 获取状态图标
    getStatusIcon() {
      const icons = {
        'completed': 'el-icon-success',
        'planned': 'el-icon-time',
        'unstarted': 'el-icon-warning'
      };
      return icons[this.currentType] || 'el-icon-s-home';
    },
    
    // 获取状态文本
    getStatusText() {
      const texts = {
        'completed': '已完成',
        'planned': '计划中',
        'unstarted': '未开展'
      };
      return texts[this.currentType] || '';
    },
    
    // 获取状态样式类
    getStatusClass() {
      return `status-${this.currentType}`;
    },
    
    // 获取卡片样式类
    getCardClass() {
      return `card-${this.currentType}`;
    },
    
    // 加载小区列表数据
    loadCommunityList(type) {
      this.communityList = [];
      
      if (type === "completed") {
        // 已完成小区
        listByStatus("0").then(response => {
          this.communityList = response.data || [];
        }).catch(error => {
          this.$message.error("获取已完成小区列表失败");
        });
      } else if (type === "planned") {
        // 计划开展小区
        listByStatus("1").then(response => {
          this.communityList = response.data || [];
        }).catch(error => {
          this.$message.error("获取计划开展小区列表失败");
        });
      } else if (type === "unstarted") {
        // 未开展小区
        getUnstartedCommunities().then(response => {
          this.communityList = response.data || [];
        }).catch(error => {
          this.$message.error("获取未开展小区列表失败");
        });
      }
    },
    
    // 格式化时间
    formatTime(row, column, cellValue) {
      if (!cellValue) return "-";
      return parseTime(cellValue, "{y}-{m}-{d}");
    },
    
    // 关闭弹窗
    handleClose() {
      this.visible = false;
      this.communityList = [];
      this.currentType = "";
    }
  }
};
</script>

<style scoped>
/* 弹窗整体样式 */
.community-dialog ::v-deep .el-dialog {
  border-radius: 12px;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
}

.community-dialog ::v-deep .el-dialog__header {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  border-radius: 12px 12px 0 0;
  padding: 20px 24px;
}

.community-dialog ::v-deep .el-dialog__title {
  color: white;
  font-weight: 600;
  font-size: 18px;
}

.community-dialog ::v-deep .el-dialog__close {
  color: white;
  font-size: 20px;
}

.community-dialog ::v-deep .el-dialog__body {
  padding: 24px;
  background: #f8fafc;
}

/* 统计卡片样式 */
.stats-card {
  display: flex;
  gap: 20px;
  margin-bottom: 24px;
}

.stats-item {
  flex: 1;
  background: white;
  padding: 20px;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
  display: flex;
  align-items: center;
  gap: 16px;
  border-left: 4px solid #667eea;
}

.stats-icon {
  font-size: 32px;
  color: #667eea;
  background: rgba(102, 126, 234, 0.1);
  padding: 12px;
  border-radius: 50%;
  width: 56px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.stats-content {
  flex: 1;
}

.stats-number {
  font-size: 24px;
  font-weight: 700;
  color: #1a202c;
  line-height: 1;
}

.stats-label {
  font-size: 14px;
  color: #718096;
  margin-top: 4px;
}

/* 列表容器样式 */
.community-list-container {
  max-height: 500px;
  overflow-y: auto;
}

/* 空状态样式 */
.empty-state {
  text-align: center;
  padding: 60px 20px;
  background: white;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

.empty-icon {
  font-size: 64px;
  color: #cbd5e0;
  margin-bottom: 16px;
}

.empty-text {
  font-size: 16px;
  color: #718096;
  margin: 0;
}

/* 网格布局 */
.community-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(400px, 1fr));
  gap: 16px;
}

/* 小区卡片样式 */
.community-card {
  background: white;
  border-radius: 12px;
  padding: 20px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
  border: 1px solid #e2e8f0;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}

.community-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
}

/* 不同状态的卡片样式 */
.card-completed {
  border-left: 4px solid #48bb78;
}

.card-planned {
  border-left: 4px solid #ed8936;
}

.card-unstarted {
  border-left: 4px solid #f56565;
}

/* 卡片头部 */
.card-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 16px;
}

.community-name {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 1;
}

.status-icon {
  font-size: 20px;
  padding: 8px;
  border-radius: 50%;
  background: rgba(102, 126, 234, 0.1);
}

.card-completed .status-icon {
  color: #48bb78;
  background: rgba(72, 187, 120, 0.1);
}

.card-planned .status-icon {
  color: #ed8936;
  background: rgba(237, 137, 54, 0.1);
}

.card-unstarted .status-icon {
  color: #f56565;
  background: rgba(245, 101, 101, 0.1);
}

.name-text {
  font-size: 16px;
  font-weight: 600;
  color: #1a202c;
  line-height: 1.4;
}

/* 状态标签 */
.status-badge {
  padding: 6px 12px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.status-completed {
  background: rgba(72, 187, 120, 0.1);
  color: #48bb78;
}

.status-planned {
  background: rgba(237, 137, 54, 0.1);
  color: #ed8936;
}

.status-unstarted {
  background: rgba(245, 101, 101, 0.1);
  color: #f56565;
}

/* 卡片内容 */
.card-content {
  padding-top: 16px;
  border-top: 1px solid #e2e8f0;
}

/* 营业部信息 */
.business-info {
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid #e2e8f0;
}

.business-item {
  display: flex;
  align-items: center;
  gap: 8px;
}

.business-icon {
  font-size: 14px;
  color: #667eea;
  width: 16px;
}

.business-label {
  font-size: 14px;
  color: #718096;
  min-width: 60px;
}

.business-value {
  font-size: 14px;
  color: #1a202c;
  font-weight: 500;
  background: rgba(102, 126, 234, 0.1);
  padding: 4px 8px;
  border-radius: 4px;
}

/* 时间信息 */
.time-info {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.time-item {
  display: flex;
  align-items: center;
  gap: 8px;
}

.time-icon {
  font-size: 14px;
  color: #667eea;
  width: 16px;
}

.time-label {
  font-size: 14px;
  color: #718096;
  min-width: 70px;
}

.time-value {
  font-size: 14px;
  color: #1a202c;
  font-weight: 500;
}

/* 未开展信息 */
.unstarted-info {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #f56565;
  font-size: 14px;
  font-weight: 500;
}

.unstarted-info i {
  font-size: 16px;
}

/* 底部按钮 */
.dialog-footer {
  text-align: center;
  padding: 20px 24px;
  background: white;
  border-radius: 0 0 12px 12px;
}

.dialog-footer .el-button {
  padding: 12px 24px;
  border-radius: 8px;
  font-weight: 500;
}

/* 滚动条样式 */
.community-list-container::-webkit-scrollbar {
  width: 6px;
}

.community-list-container::-webkit-scrollbar-track {
  background: #f1f5f9;
  border-radius: 3px;
}

.community-list-container::-webkit-scrollbar-thumb {
  background: #cbd5e0;
  border-radius: 3px;
}

.community-list-container::-webkit-scrollbar-thumb:hover {
  background: #a0aec0;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .community-grid {
    grid-template-columns: 1fr;
  }
  
  .stats-card {
    flex-direction: column;
  }
  
  .community-dialog ::v-deep .el-dialog {
    width: 95% !important;
    margin: 20px auto;
  }
}
</style>